{% extends "layout/default.html" %}


{% block main_content %}

	<h3 class="header smaller lighter blue">{{ stockWeb.name }}</h3>
	<div class="table-header">{{ stockWeb.name }}</div>

	<div class="row">&nbsp;</div>
	<div class="row">
		{% for index,element in enumerate(stockWeb.columns) %}
		{% if index < 15 %}
			{% if element != 'eastmoney_url' %}
			<div class="col-md-4" id="filter_col{{ index + 1 }}" data-column="{{ index }}">
				{{ stockWeb.column_names[index] }} &nbsp;
				<!-- Column - {{ stockWeb.column_names[index] }} - {{ element }} -->

				<input type="text" class="column_filter input-group-sm form-control {% if element == 'date' %}date-picker{% end %}"
					   {% if element == 'date' %} value="{{ date_now }}" {% end %}
					   id="col{{ index }}_filter">
			</div>
			{% end %}
		{% end %}{% end %}
	</div>

    <div class="row">&nbsp;</div>
    <div>
        <button id="create-fun" class="btn btn-info btn-sm" onclick="createFun()">新建</button>
    </div>

	<table cellpadding="3" cellspacing="0" border="0" style="width: 67%; margin: 0 auto 2em auto;">
		<tbody>

		</tbody>
	</table>
	<!-- div.table-responsive -->
	<!-- div.dataTables_borderWrap -->
	<div>
		<div class="pull-right tableTools-container"></div>
		<table id="dynamic-table" class="table table-striped table-bordered table-hover">
			<thead>
				<tr>{% for column_name in stockWeb.column_names %}
					<th>{{ column_name }}</th>
				{% end %}
                    <th>次级回升</th>
                    <th>自然回升</th>
                    <th>上涨趋势</th>
                    <th>下跌趋势</th>
                    <th>自然回调</th>
                    <th>次级回调</th>
                    <th>操作</th>
                </tr>
			</thead>
		</table>
	</div>

<!-- 定义一个窗口的Div 东方财富股票数据页面 -->
<div id="dfcf-window-modal" class="modal fade">
	<div class="modal-dialog" style="width:1010px;">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h3 class="smaller lighter blue no-margin">东方财富分析</h3>
			</div>
			<div class="modal-body" id="dfcf-iframe-body" >
			</div>
		</div>
	</div>
</div>

<!-- 定义一个窗口的Div 编辑 -->
<div id="indicators-window-modal" class="modal fade">
	<div class="modal-dialog" style="width:1050px;">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h3 class="smaller lighter blue no-margin">编辑数据</h3>
			</div>
			<div class="modal-body" id="indicators-window-body" >

                <div class="form-group form-line">
                     <span>日期：</span> <input id= "date" name="date" type="text" readonly="readonly"/>
                </div>
                <div class="form-group form-line">
                     <span>代码：</span> <input id="code" name="code" type="text" readonly="readonly"/>
                </div>
                <div class="form-group form-line">
                     <span>名称：</span> <input id="name"  name="name" type="text" readonly="readonly"/>
                </div>
                <div class="form-group form-line">
{#                     <span>type</span> <input id="type" name="type" type="text" list="type-list"/>#}
{#                    <datalist id="type-list">#}
{#                        次级回升second_up；自然回升natural_up；上涨趋势up；下跌趋势down；自然回调natural_down；次级回调second_down#}
{#                        <option>second_up</option>#}
{#                        <option>natural_up</option>#}
{#                        <option>up</option>#}
{#                        <option>down</option>#}
{#                        <option>natural_down</option>#}
{#                        <option>second_down</option>#}
{#                    </datalist>#}

                    <label for="color">类型：</label><select id="type" value="black">
                        <option value="second_up">次级回升second_up</option>
                        <option value="natural_up">自然回升natural_up</option>
                        <option value="up">上涨趋势up</option>
                        <option value="down">下跌趋势down</option>
                        <option value="natural_down">自然回调natural_down</option>
                        <option value="second_down">次级回调second_down</option>
                    </select>
                </div>
                <div class="form-group form-line">
{#                     <span>color</span>#}
{#                    <input id="color" name="color" type="text" list="color-list"/>#}
{#                    <datalist id="color-list">#}
{#                        <option>red</option>#}
{#                        <option>green</option>#}
{#                        <option>black</option>#}
{#                    </datalist>#}
                    <label for="color">颜色：</label><select id="color" value="black">
                        <option value="red">上升趋势</option>
                        <option value="green">下降趋势</option>
                        <option value="black">其他</option>
                        <option value="red_reverse">上升反转</option>
                        <option value="green_reverse">下降反转</option>
                        <option value="red_key">上升关键点</option>
                        <option value="green_key">下降关键点</option>
                    </select>

                </div>

                <button id="confirm" class="btn btn-default btn-sm" onclick="confirm()">确定</button>

			</div>
		</div>
	</div>
</div>


<!-- 定义一个窗口的Div 新建 -->
<div id="indicators-window-modal-create" class="modal fade">
	<div class="modal-dialog" style="width:1050px;">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h3 class="smaller lighter blue no-margin">新建数据</h3>
			</div>
			<div class="modal-body" id="indicators-window-body-create" >

                <div class="form-group form-line">
                     <span>日期：</span><input type="text" class="{% if 'date' == 'date' %}date-picker{% end %}"
					   {% if 'date' == 'date' %} value="{{ date_now }}" {% end %} id="date-create">
                </div>
                <div class="form-group form-line">
                     <span>代码：</span> <input id="code-create" name="code-create" type="text"/>
                </div>

                <button id="confirm-create" class="btn btn-default btn-sm" onclick="confirmCreate()">确定</button>
			</div>
		</div>
	</div>
</div>

<!-- inline scripts related to this page -->
<script type="text/javascript">

	//每次动态加载 指标分析窗口
	function showIndicatorsWindow(code) {
		var baseUrl = '/stock/data/indicators?code='+code; // 没有跨域问题，直接加载

		$('#indicators-window-body').html( "<h5>数据加载中...请稍候.</h5>" );
		$('#indicators-window-body').context = $("#indicators-window-body").load(baseUrl);


		$('#indicators-window-modal').modal('show');
	}

	//每次动态加载 东方财富窗口
	function showDFCFWindow(code) {
		var iframe = document.createElement('iframe')
		// var baseUrl = 'https://emweb.eastmoney.com/PC_HSF10/ShareholderResearch/Index?type=soft&code='+code;
		var baseUrl = 'https://emweb.eastmoney.com/PC_HSF10/OperationsRequired/Index?type=soft&code='+code;

		iframe.src = baseUrl;
		iframe.width = '980px';
		iframe.height = '700px';
		iframe.frameborder = '0';
		$('#dfcf-iframe-body').empty(); // 先清空数据
		document.getElementById("dfcf-iframe-body").appendChild(iframe)
		$('#dfcf-window-modal').modal('show');
	}

	function editFun(date, code, name){
	    console.log(date)
		$('#date').val(date)
        $('#code').val(code)
        $('#name').val(name)

		$('#indicators-window-body').context = $("#indicators-window-body").load();
		$('#indicators-window-modal').modal('show');
    }

    	function createFun(){
	    console.log("ceate")

		$('#indicators-window-body-create').context = $("#indicators-window-body-create").load();
		$('#indicators-window-modal-create').modal('show');
    }


    function confirm() {
        console.log(1);

        let table_name = $.getUrlVar('table_name');
        let date = $('#date').val();
        let code = $('#code').val();
        let type = $('#type').val();
        let color = $('#color').val();

        console.log(date);
        console.log(code);
        console.log(type);
        console.log(color);
        console.log(table_name);


        let data_json = {
            "date": date,
            "code": code,
            "type": type,
            "color": color
        };

        $.ajax({
            type: "POST",
            url: "/data/editor/save?action=update&table_name=" + table_name + "&date=" + date + "&code=" + code
                + "&type=" + type + "&color=" + color,
            contentType: "application/x-www-form-urlencoded",
            dataType: "form",
            data: data_json,
            jsonp: 'callback',
            success: function (msg) {
                console.log('success');
            },
            error: function () {
                {#alert("错误");#}
                console.log('warn');
		        $('#indicators-window-modal').modal('hide');
		        refresh1();
		        {#location.reload();#}
            }
        });
    }

    function confirmCreate() {
        console.log(2);

        let table_name = $.getUrlVar('table_name');
        let date = $('#date-create').val();
        let code = $('#code-create').val();


        console.log(date);
        console.log(code);
        console.log(table_name);


        let data_json = {
            "date": date,
            "code": code
        };

        $.ajax({
            type: "POST",
            url: "/data/editor/save?action=create&table_name=" + table_name + "&date=" + date + "&code=" + code,
            contentType: "application/x-www-form-urlencoded",
            dataType: "form",
            data: data_json,
            jsonp: 'callback',
            success: function (msg) {
                console.log('success');
                console.log('warn');
		        $('#indicators-window-modal-create').modal('hide');
		        refresh1();
            },
            error: function () {
                {#alert("错误");#}
                console.log('warn');
		        $('#indicators-window-modal-create').modal('hide');
		        refresh1();
		        {#location.reload();#}
            }
        });
    }

    function refresh1(){
        jQuery(function($) {
		var nameParam = $.getUrlVar('table_name');
		console.log("refresh000000");
        var myTable = $('#dynamic-table').DataTable({
            destroy: true,
        "select": true,
        "bFilter": true,
        "ordering": true,
        "order": [[0,"desc"]],
        "processing": true,
        "serverSide": true,
        "lengthMenu": [[20, 30, 50, 100, 100, -1], [20, 30, 50, 100, 100, "All"]],
        "language": {
            "url": "/static/js/datatables.Chinese.json"
        },
        "ajax": "/stock/api_data?name=" + nameParam,
        "columns": [
            {% for column in stockWeb.columns %}
            {"data": "{{ column }}"},
            {% end %}
            {
                "data": "date",
                "title": "操作",
                "render": function (data, type, row) {
                    return '<a href="javascript:void(0)" onclick="editFun(\'' + row.date + '\',\'' + row.code + '\',\'' + row.name + '\');"  class="btn btn-warning btn-sm">编辑</a> '}
            },
                {
                    "data": "latest_price",
                    "title": "次级回升",
                    "render": function (data, type, row) {
{#text-decoration:underline;#}
                        if (row.type == 'second_up')
                            if (row.color == 'red')
                                return '<a href="javascript:void(0);"  style="color:red;">' + row.latest_price + '</a> ';
                            else if (row.color == 'green')
                                return '<a href="javascript:void(0);"  style="color:green;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'black' )
                                return '<a href="javascript:void(0);"  style="color:black;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'red_reverse' )
                                return '<a href="javascript:void(0);"  style="color:green;text-decoration:underline;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'green_reverse' )
                                return '<a href="javascript:void(0);"  style="color:red;text-decoration:underline;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'red_key' )
                                return '<a href="javascript:void(0);"  style="color:red;border-bottom:5px solid red;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'green_key' )
                                return '<a href="javascript:void(0);"  style="color:green;border-bottom:5px solid red;">' + row.latest_price + '</a> ';
                        else
                            return '<a></a>';
                    },
                },
                {
                    "data": "latest_price",
                    "title": "自然回升",
                    "render": function (data, type, row) {
{#text-decoration:underline;#}
                        if (row.type == 'natural_up')
                            if (row.color == 'red')
                                return '<a href="javascript:void(0);"  style="color:red;">' + row.latest_price + '</a> ';
                            else if (row.color == 'green')
                                return '<a href="javascript:void(0);"  style="color:green;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'black' )
                                return '<a href="javascript:void(0);"  style="color:black;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'red_reverse' )
                                return '<a href="javascript:void(0);"  style="color:green;text-decoration:underline;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'green_reverse' )
                                return '<a href="javascript:void(0);"  style="color:red;text-decoration:underline;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'red_key' )
                                return '<a href="javascript:void(0);"  style="color:red;border-bottom:5px solid red;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'green_key' )
                                return '<a href="javascript:void(0);"  style="color:green;border-bottom:5px solid red;">' + row.latest_price + '</a> ';
                        else
                            return '<a></a>';
                    },
                },
                {
                    "data": "latest_price",
                    "title": "上涨趋势",
                    "render": function (data, type, row) {
{#text-decoration:underline;#}
                        if (row.type == 'up')
                            if (row.color == 'red')
                                return '<a href="javascript:void(0);"  style="color:red;">' + row.latest_price + '</a> ';
                            else if (row.color == 'green')
                                return '<a href="javascript:void(0);"  style="color:green;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'black' )
                                return '<a href="javascript:void(0);"  style="color:black;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'red_reverse' )
                                return '<a href="javascript:void(0);"  style="color:green;text-decoration:underline;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'green_reverse' )
                                return '<a href="javascript:void(0);"  style="color:red;text-decoration:underline;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'red_key' )
                                return '<a href="javascript:void(0);"  style="color:red;border-bottom:5px solid red;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'green_key' )
                                return '<a href="javascript:void(0);"  style="color:green;border-bottom:5px solid red;">' + row.latest_price + '</a> ';
                        else
                            return '<a></a>';
                    },
                },
                {
                    "data": "latest_price",
                    "title": "下跌趋势",
                    "render": function (data, type, row) {
{#text-decoration:underline;#}
                        if (row.type == 'down')
                            if (row.color == 'red')
                                return '<a href="javascript:void(0);"  style="color:red;">' + row.latest_price + '</a> ';
                            else if (row.color == 'green')
                                return '<a href="javascript:void(0);"  style="color:green;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'black' )
                                return '<a href="javascript:void(0);"  style="color:black;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'red_reverse' )
                                return '<a href="javascript:void(0);"  style="color:green;text-decoration:underline;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'green_reverse' )
                                return '<a href="javascript:void(0);"  style="color:red;text-decoration:underline;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'red_key' )
                                return '<a href="javascript:void(0);"  style="color:red;border-bottom:5px solid red;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'green_key' )
                                return '<a href="javascript:void(0);"  style="color:green;border-bottom:5px solid red;">' + row.latest_price + '</a> ';
                        else
                            return '<a></a>';
                    },
                },
                {
                    "data": "latest_price",
                    "title": "自然回调",
                    "render": function (data, type, row) {
{#text-decoration:underline;#}
                        if (row.type == 'natural_down')
                            if (row.color == 'red')
                                return '<a href="javascript:void(0);"  style="color:red;">' + row.latest_price + '</a> ';
                            else if (row.color == 'green')
                                return '<a href="javascript:void(0);"  style="color:green;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'black' )
                                return '<a href="javascript:void(0);"  style="color:black;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'red_reverse' )
                                return '<a href="javascript:void(0);"  style="color:green;text-decoration:underline;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'green_reverse' )
                                return '<a href="javascript:void(0);"  style="color:red;text-decoration:underline;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'red_key' )
                                return '<a href="javascript:void(0);"  style="color:red;border-bottom:5px solid red;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'green_key' )
                                return '<a href="javascript:void(0);"  style="color:green;border-bottom:5px solid red;">' + row.latest_price + '</a> ';
                        else
                            return '<a></a>';
                    },
                },
                {
                    "data": "latest_price",
                    "title": "次级回调",
                    "render": function (data, type, row) {
{#text-decoration:underline;#}
                        if (row.type == 'second_down')
                            if (row.color == 'red')
                                return '<a href="javascript:void(0);"  style="color:red;">' + row.latest_price + '</a> ';
                            else if (row.color == 'green')
                                return '<a href="javascript:void(0);"  style="color:green;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'black' )
                                return '<a href="javascript:void(0);"  style="color:black;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'red_reverse' )
                                return '<a href="javascript:void(0);"  style="color:green;text-decoration:underline;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'green_reverse' )
                                return '<a href="javascript:void(0);"  style="color:red;text-decoration:underline;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'red_key' )
                                return '<a href="javascript:void(0);"  style="color:red;border-bottom:5px solid red;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'green_key' )
                                return '<a href="javascript:void(0);"  style="color:green;border-bottom:5px solid red;">' + row.latest_price + '</a> ';
                        else
                            return '<a></a>';
                    }
                }

        ]
    });
	})
    }

	jQuery(function($) {

		$( ".date-picker" ).datepicker({
			language: 'zh-CN', //设置语言
			format:"yyyymmdd",
			showOtherMonths: true,
			selectOtherMonths: false,
			autoclose: true,
            todayHighlight: true,
            onSelect: function(selected,evnt) {
                console.log(selected);
            }
        }).on('changeDate', function(ev){
            $('input.column_filter').click();//触发搜索
        });

		var nameParam = $.getUrlVar('table_name');
		//console.log(nameParam);
		var myTable = $('#dynamic-table').DataTable( {
            destroy: true,
			"select": true,
			"bFilter": true,
			"ordering": true,
            "order": [[0,"desc"]],
			"processing": true,
			"serverSide": true,
			"lengthMenu": [[20, 30, 50, 100,100, -1], [20, 30, 50, 100,100, "All"]],
			"language": {
                "url": "/static/js/datatables.Chinese.json"
            },
            "ajax": "/stock/api_data?name=" + nameParam,
            "columns": [
                {% for column in stockWeb.columns %}
                {"data": "{{ column }}"},
                {% end %}
                {
                    "data": "date",
                    "title": "操作",
                    "render": function (data, type, row) {
                        return '<a href="javascript:void(0)" onclick="editFun(\'' + row.date + '\',\'' + row.code + '\',\'' + row.name + '\');"  class="btn btn-warning btn-sm">编辑</a> '}
                },
                {
                    "data": "latest_price",
                    "title": "次级回升",
                    "render": function (data, type, row) {
{#text-decoration:underline;#}
                        if (row.type == 'second_up')
                            if (row.color == 'red')
                                return '<a href="javascript:void(0);"  style="color:red;">' + row.latest_price + '</a> ';
                            else if (row.color == 'green')
                                return '<a href="javascript:void(0);"  style="color:green;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'black' )
                                return '<a href="javascript:void(0);"  style="color:black;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'red_reverse' )
                                return '<a href="javascript:void(0);"  style="color:green;text-decoration:underline;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'green_reverse' )
                                return '<a href="javascript:void(0);"  style="color:red;text-decoration:underline;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'red_key' )
                                return '<a href="javascript:void(0);"  style="color:red;border-bottom:5px solid red;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'green_key' )
                                return '<a href="javascript:void(0);"  style="color:green;border-bottom:5px solid red;">' + row.latest_price + '</a> ';
                        else
                            return '<a></a>';
                    },
                },
                {
                    "data": "latest_price",
                    "title": "自然回升",
                    "render": function (data, type, row) {
{#text-decoration:underline;#}
                        if (row.type == 'natural_up')
                            if (row.color == 'red')
                                return '<a href="javascript:void(0);"  style="color:red;">' + row.latest_price + '</a> ';
                            else if (row.color == 'green')
                                return '<a href="javascript:void(0);"  style="color:green;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'black' )
                                return '<a href="javascript:void(0);"  style="color:black;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'red_reverse' )
                                return '<a href="javascript:void(0);"  style="color:green;text-decoration:underline;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'green_reverse' )
                                return '<a href="javascript:void(0);"  style="color:red;text-decoration:underline;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'red_key' )
                                return '<a href="javascript:void(0);"  style="color:red;border-bottom:5px solid red;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'green_key' )
                                return '<a href="javascript:void(0);"  style="color:green;border-bottom:5px solid red;">' + row.latest_price + '</a> ';
                        else
                            return '<a></a>';
                    },
                },
                {
                    "data": "latest_price",
                    "title": "上涨趋势",
                    "render": function (data, type, row) {
{#text-decoration:underline;#}
                        if (row.type == 'up')
                            if (row.color == 'red')
                                return '<a href="javascript:void(0);"  style="color:red;">' + row.latest_price + '</a> ';
                            else if (row.color == 'green')
                                return '<a href="javascript:void(0);"  style="color:green;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'black' )
                                return '<a href="javascript:void(0);"  style="color:black;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'red_reverse' )
                                return '<a href="javascript:void(0);"  style="color:green;text-decoration:underline;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'green_reverse' )
                                return '<a href="javascript:void(0);"  style="color:red;text-decoration:underline;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'red_key' )
                                return '<a href="javascript:void(0);"  style="color:red;border-bottom:5px solid red;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'green_key' )
                                return '<a href="javascript:void(0);"  style="color:green;border-bottom:5px solid red;">' + row.latest_price + '</a> ';
                        else
                            return '<a></a>';
                    },
                },
                {
                    "data": "latest_price",
                    "title": "下跌趋势",
                    "render": function (data, type, row) {
{#text-decoration:underline;#}
                        if (row.type == 'down')
                            if (row.color == 'red')
                                return '<a href="javascript:void(0);"  style="color:red;">' + row.latest_price + '</a> ';
                            else if (row.color == 'green')
                                return '<a href="javascript:void(0);"  style="color:green;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'black' )
                                return '<a href="javascript:void(0);"  style="color:black;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'red_reverse' )
                                return '<a href="javascript:void(0);"  style="color:green;text-decoration:underline;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'green_reverse' )
                                return '<a href="javascript:void(0);"  style="color:red;text-decoration:underline;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'red_key' )
                                return '<a href="javascript:void(0);"  style="color:red;border-bottom:5px solid red;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'green_key' )
                                return '<a href="javascript:void(0);"  style="color:green;border-bottom:5px solid red;">' + row.latest_price + '</a> ';
                        else
                            return '<a></a>';
                    },
                },
                {
                    "data": "latest_price",
                    "title": "自然回调",
                    "render": function (data, type, row) {
{#text-decoration:underline;#}
                        if (row.type == 'natural_down')
                            if (row.color == 'red')
                                return '<a href="javascript:void(0);"  style="color:red;">' + row.latest_price + '</a> ';
                            else if (row.color == 'green')
                                return '<a href="javascript:void(0);"  style="color:green;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'black' )
                                return '<a href="javascript:void(0);"  style="color:black;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'red_reverse' )
                                return '<a href="javascript:void(0);"  style="color:green;text-decoration:underline;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'green_reverse' )
                                return '<a href="javascript:void(0);"  style="color:red;text-decoration:underline;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'red_key' )
                                return '<a href="javascript:void(0);"  style="color:red;border-bottom:5px solid red;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'green_key' )
                                return '<a href="javascript:void(0);"  style="color:green;border-bottom:5px solid red;">' + row.latest_price + '</a> ';
                        else
                            return '<a></a>';
                    },
                },
                {
                    "data": "latest_price",
                    "title": "次级回调",
                    "render": function (data, type, row) {
{#text-decoration:underline;#}
                        if (row.type == 'second_down')
                            if (row.color == 'red')
                                return '<a href="javascript:void(0);"  style="color:red;">' + row.latest_price + '</a> ';
                            else if (row.color == 'green')
                                return '<a href="javascript:void(0);"  style="color:green;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'black' )
                                return '<a href="javascript:void(0);"  style="color:black;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'red_reverse' )
                                return '<a href="javascript:void(0);"  style="color:green;text-decoration:underline;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'green_reverse' )
                                return '<a href="javascript:void(0);"  style="color:red;text-decoration:underline;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'red_key' )
                                return '<a href="javascript:void(0);"  style="color:red;border-bottom:5px solid red;">' + row.latest_price + '</a> ';
                            else  if (row.color == 'green_key' )
                                return '<a href="javascript:void(0);"  style="color:green;border-bottom:5px solid red;">' + row.latest_price + '</a> ';
                        else
                            return '<a></a>';
                    }
                }

            ]
		} );

		$('input.column_filter').on( 'keyup click', function () {
			var i =  $(this).parents('div').attr('data-column') ;
			//console.log(i,"val:",$(this).val());
			myTable.column(i).search(
				$(this).val()
			).draw();
		});

		$('input.column_filter').click();//第一次点击执行，读取时间信息。


		$.fn.dataTable.Buttons.defaults.dom.container.className = 'dt-buttons btn-overlap btn-group btn-overlap';

		new $.fn.dataTable.Buttons( myTable, {
			buttons: [
			  {
				"extend": "copy",
				"text": "<i class='fa fa-copy bigger-110 pink'></i> <span class='hidden'>Copy to clipboard</span>",
				"className": "btn btn-white btn-primary btn-bold"
			  },
			  {
				"extend": "csv",
				"text": "<i class='fa fa-database bigger-110 orange'></i> <span class='hidden'>Export to CSV</span>",
				"className": "btn btn-white btn-primary btn-bold"
			  },
			  {
				"extend": "print",
				"text": "<i class='fa fa-print bigger-110 grey'></i> <span class='hidden'>Print</span>",
				"className": "btn btn-white btn-primary btn-bold",
				autoPrint: false,
				message: 'This print was produced using the Print button for DataTables'
			  }
			]
		} );
		myTable.buttons().container().appendTo( $('.tableTools-container') );
	})
</script>
{% end %}